<script lang="ts" setup>
import {
  entRoute,
  homeRoute,
  intlRoute,
  nationalRoute,
  sportsRoute,
} from "@/router";
import { pxChangeRem } from "@/utils";
import { useRefModel } from "@/utils/hooks";
defineOptions({
  name: "HomeScrollXTabs",
});
let props = defineProps({
  isFixed: {
    type: [Boolean],
    default: false,
  },
});
let emit = defineEmits(["update:isFixed"]);
let isFixed = useRefModel(props, "isFixed", emit);
let tabList = reactive([
  {
    title: homeRoute.name,
    path: homeRoute.path,
    params: {
      category: "Hot",
    },
  },
  {
    title: nationalRoute.name,
    path: nationalRoute.path,
    params: {
      category: "National",
    },
  },
  {
    title: sportsRoute.name,
    path: sportsRoute.path,
    params: {
      category: "Sports",
    },
  },
  {
    title: intlRoute.name,
    path: intlRoute.path,
    params: {
      category: "World",
    },
  },
  {
    title: entRoute.name,
    path: entRoute.path,
    params: {
      category: "Entertainment",
    },
  },
]);
let router = useRouter();
let currentPath = router.currentRoute.value.path;
let findIndex = tabList.findIndex((item) => item.path === currentPath);
if (findIndex < 0) {
  currentPath = LocalStorage.getItem("currentPath");
  findIndex = tabList.findIndex((item) => item.path === currentPath);
}
let currentActiveIndex = ref(findIndex);
function handleClickItem(index: number, item: { path: string; params: any }) {
  currentActiveIndex.value = index;
  let url = buildUrl(item.path, item.params);
  router.push(url);
}
let scrollxRef = ref<any>(null);
function handleScrollToViewport() {
  if (currentPath === homeRoute.path) {
    return;
  }
  let activeTabItem: any = [].find.call(
    scrollxRef.value.children,
    (item: any) => item.classList.contains("active")
  );
  if (!activeTabItem) {
    return;
  }
  activeTabItem.scrollIntoView({
    behavior: "auto",
  });
}
onMounted(() => {
  handleScrollToViewport();
});
</script>
<template>
  <div
    :style="{
      height: pxChangeRem('50px'),
    }"
  >
    <div class="home-scroll-x-tabs">
      <div class="scroll-x" ref="scrollxRef">
        <a
          v-for="(item, index) in tabList"
          :key="index"
          v-rm-href
          :class="`scroll-item ${currentActiveIndex === index ? 'active' : ''}`"
          @click="() => handleClickItem(index, item)"
        >
          <div class="">{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-scroll-x-tabs {
  z-index: 999;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  overflow-x: auto;

  position: v-bind("isFixed === true? 'fixed': 'static'");
  left: 0;
  top: 0;
  .scroll-x {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
    height: 50px;
    background-color: #fff;

    .scroll-item {
      white-space: nowrap;
      background-color: rgba($color: #f7f7ff, $alpha: 0.7);
      font-weight: 200;
      color: #999;
      padding: 4px 14px;
      border-radius: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      column-gap: 8px;
      font-size: 14px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      &:first-of-type {
        margin-left: 16px;
      }

      &:last-of-type {
        margin-right: 16px;
      }

      &.active {
        font-weight: 600;
        color: #ffffff;
        background: linear-gradient(90deg, #0098ff 0%, #67c2ff 100%);
        box-shadow: 0px 2px 4px 0px rgba(13, 158, 255, 0.24);
      }
    }
  }
}
</style>
